import React, { useEffect, useLayoutEffect, useRef } from 'react'

export default function LayoutEffectCom() {
  let ref = useRef();
  //hook 函数 useLayoutEffect, 参数与useEffect 是相同的
  useLayoutEffect(() => {
    //该回调函数会在组件挂载完毕之后, 同步执行(使用较少)
    ref.current.style.left = '500px';
  }, []);

  // useEffect(() => {
  //   //该回调函数会在组件挂载完毕之后, 异步执行 (使用较多)
  //   ref.current.style.left = '500px';
  // }, []);
  return (
    <div ref={ref} style={{width: 200, height: 100, position: 'absolute', left: 0, background: '#c45'}}></div>
  )
}
